<template>
  <div class="admin-sidebar">
    <div class="sidebar-header">
      <h3>管理员后台</h3>
      <div class="admin-info" v-if="adminInfo">
        <p class="admin-name">{{ adminInfo.username }}</p>
        <el-button size="small" @click="handleLogout" type="danger">退出登录</el-button>
      </div>
    </div>
    <el-menu :default-active="$route.name" class="sidebar-menu" router>
      <el-menu-item index="AdminDashboard" @click="$router.push({ name: 'AdminDashboard' })">
        <el-icon><Odometer /></el-icon>
        <span>后台总览</span>
      </el-menu-item>
      
      <el-menu-item index="UserManagement" @click="$router.push({ name: 'UserManagement' })">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      
      <el-menu-item index="PostManagement" @click="$router.push({ name: 'PostManagement' })">
        <el-icon><Document /></el-icon>
        <span>帖子管理</span>
      </el-menu-item>
      
      <el-menu-item index="ResourceManagement" @click="$router.push({ name: 'ResourceManagement' })">
        <el-icon><Files /></el-icon>
        <span>资源管理</span>
      </el-menu-item>
      
      <el-menu-item index="ReportManagement" @click="$router.push({ name: 'ReportManagement' })">
        <el-icon><Warning /></el-icon>
        <span>举报管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Odometer, User, Document, Files, Warning } from '@element-plus/icons-vue'
import { useAdminAuth } from '../composables/useAdminAuth'

const { adminInfo, adminLogout } = useAdminAuth()

const handleLogout = () => {
  adminLogout()
}
</script>

<style scoped>
.admin-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  min-height: unset;
  margin: 0;
  z-index: 100;
  background: rgb(91, 116, 238);
  color: #fff;
  box-shadow: 2px 0 12px rgba(60,80,120,0.06);
  border-radius: 0 18px 18px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: box-shadow 0.2s;
  font-family: 'Montserrat', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.sidebar-header {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}

.sidebar-header h3 {
  color: #fff;
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.admin-info {
  margin-top: 10px;
}

.admin-name {
  color: #fff;
  margin: 5px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.sidebar-menu {
  background: transparent;
  border-right: none;
  border-radius: 12px;
}
:deep(.el-menu-item) {
  color: #fff;
  border-radius: 10px;
  margin: 4px 8px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
:deep(.el-menu-item:hover) {
  background: #22334d;
  color: #ffd04b;
  box-shadow: 0 2px 8px rgba(60,80,120,0.10);
  transform: translateX(4px) scale(1.04);
}
:deep(.el-menu-item.is-active) {
  background: #fff;
  color: #3b5cff;
  font-weight: bold;
  box-shadow: 0 4px 16px 0 rgba(60, 80, 120, 0.12);
  transform: scale(1.06);
}
</style>
